<template>
    <div class="mainBox">
        <div class="search">
            <el-cascader
                v-if="isShow"
                v-model="caValue"
                :options="cascaders"
            ></el-cascader>
            <h2 v-else>{{ title }}</h2>
        </div>
        <div class="center">
            <div style="width:960px;display:flex;flexWrap: wrap;">
                <div class="item">
                    <span>通道电源1:</span>
                    <el-input
                        type="number"
                        v-model="from.channelPower1"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>通道电源2:</span>
                    <el-input
                        v-model="from.channelPower2"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>磁头1(10)档有模拟轮:</span>
                    <el-input
                        v-model="from.head10Have"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>磁头1(10)档无模拟轮:</span>
                    <el-input
                        v-model="from.head10No"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>磁头1(12)档有模拟轮:</span>
                    <el-input
                        v-model="from.head12Have"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>磁头1(12)档无模拟轮:</span>
                    <el-input
                        v-model="from.head12No"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>磁头2(11)档有模拟轮:</span>
                    <el-input
                        v-model="from.head11Have"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>磁头2(11)档无模拟轮:</span>
                    <el-input
                        v-model="from.head11No"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>磁头2(13)档有模拟轮:</span>
                    <el-input
                        v-model="from.head13Have"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>磁头2(13)档无模拟轮:</span>
                    <el-input
                        v-model="from.head13No"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>端子1-11电压:</span>
                    <el-input
                        v-model="from.terminal1V"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>端子3-11电压:</span>
                    <el-input
                        v-model="from.terminal11V"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>Sk1发送频率:</span>
                    <el-input
                        v-model="from.sk1SendH"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>Sk1发送电压:</span>
                    <el-input
                        v-model="from.sk1SendV"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>Sk2发送频率:</span>
                    <el-input
                        v-model="from.sk2SendH"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>Sk2发送电压:</span>
                    <el-input
                        v-model="from.sk2SendV"
                        placeholder="定位"
                    ></el-input>
                </div>
                <div class="item">
                    <span>备注:</span>
                    <el-input v-model="machineRemark" placeholder=""></el-input>
                </div>
                <div class="item ra">
                    <span>状态:</span>
                    <div class="cc">
                        <el-radio v-model="radio" :label="false">正常</el-radio>
                        <el-radio v-model="radio" :label="true"
                            >待整改</el-radio
                        >
                    </div>
                </div>
                <div class="item re" v-if="radio">
                    <span></span>
                    <el-input
                        v-model="problemRemark"
                        placeholder="输入备注"
                    ></el-input>
                </div>
            </div>
        </div>
        <div class="btn">
            <el-button type="primary" @click="addData">添加</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            radio: false,
            isShow: true,
            caValue: [],
            cascaders: [],
            title: "",
            from: {
                channelPower1: null,
                channelPower2: null,
                head10Have: null,
                head10No: null,
                head12Have: null,
                head12No: null,
                head11Have: null,
                head11No: null,
                head13Have: null,
                head13No: null,
                terminal1V: null,
                terminal11V: null,
                sk1SendH: null,
                sk1SendV: null,
                sk2SendH: null,
                sk2SendV: null,
            },
            machineRemark: "",
            problemRemark: "",
            datass: {},
            to: "",
            region: "",
        };
    },
    created() {
        this.$http
            .get("services/app/JiZhouService/GetJiZhouSelect")
            .then((res) => {
                this.cascaders = res.data.result;
            });
        if (this.$route.query.id) {
            this.isShow = false;
            this.$http
                .get(
                    `services/app/JiZhouService/GetGroupJiZhouData?recordId=${this.$route.query.id}`
                )
                .then((res) => {
                    if (res.data.result) {
                        this.title =
                            res.data.result.stationArea +
                            "/" +
                            res.data.result.machineCode;
                        this.datass = res.data.result;
                        this.from = this.datass.machineDatas;
                        this.machineRemark = this.datass.machineRemark.content;
                        this.problemRemark = this.datass.problemRemark;
                        this.to = res.data.result.stationArea;
                        this.region = res.data.result.machineCode;

                        if (this.problemRemark.length > 0) {
                            this.radio = true;
                        }
                    }
                });
        }
    },
    mounted() {},
    methods: {
        addData() {
            if (this.isShow && !this.caValue[1]) {
                this.$message.error("请选择计轴！");
                return;
            }
            let params = {};
            let forms = {};
            for (let i of Object.keys(this.from)) {
                if (this.from[i] && this.from[i].length > 0) {
                    forms[i] = parseInt(this.from[i]);
                }
            }
            params["machineCode"] = this.caValue[1];
            params["machineData"] = forms;
            params["machineRemark"] = this.machineRemark;
            params["status"] = 0;
            params["problemRemark"] = this.problemRemark;

            if (this.$route.query.id) {
                params = this.datass;
                params.machineRemark.content = this.machineRemark;
                params.problemRemark = this.problemRemark;
                delete params.machineDatas.dataTime;
                delete params.machineDatas.machineCode;
                this.$http
                    .put(
                        "services/app/JiZhouService/UpdateGroupJiZhouData",
                        params
                    )
                    .then(() => {
                        this.cascaders = res.data.result;
                    });
                this.$router.push({
                    name: "homePage",
                    query: {
                        one: this.caValue[0] ? this.caValue[0] : this.to,
                        two: this.caValue[1] ? this.caValue[1] : this.region,
                    },
                });
                return;
            }

            this.$http
                .post("services/app/JiZhouService/AddAllJiZhouData", params)
                .then(() => {
                    this.$router.push({
                        name: "homePage",
                        query: {
                            one: this.caValue[0] ? this.caValue[0] : this.to,
                            two: this.caValue[1]
                                ? this.caValue[1]
                                : this.region,
                        },
                    });
                });
        },
    },
};
</script>
<style lang="less" scoped>
.search {
    margin-bottom: 10px;
}
.mainBox {
    height: calc(100vh - 110px);
}
.mainBox::-webkit-scrollbar {
    width: 0px;
}
/deep/ .el-input {
    input {
        background-color: var(--input-bgc);
    }
}
/deep/ .el-input__inner::placeholder {
    color: var(--input-fc);
}
.center {
    // background-color: #fff;
    margin-bottom: 10px;
    min-height: 400px;
    display: flex;
    justify-content: center;
    min-width: 960px;
    padding: 30px 0;
    .item {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        span {
            width: 160px;
            height: 40px;
            text-align: end;
            margin-right: 20px;
            line-height: 40px;
        }
        .el-input {
            width: 280px;
            margin-right: 20px;
        }
    }
    .ra {
        align-items: center;
        .cc {
            width: 440px;
        }
    }
}
/deep/ input {
    color: #fff;
}
.el-cascader {
    /deep/ input[placeholder] {
        &::placeholder {
            color: #fff;
        }
    }
}

/deep/ input[placeholder] {
    &::placeholder {
        color: var(--color);
    }
}
.btn {
    display: flex;
    justify-content: center;
    // background-color: #fff;
    padding: 10px;
}
</style>
